<template>
    <div id="zoning_leakDetection">
        <div class="main">
            <div id="gis"></div>
            <div class="cards">
                <div class="card-item">
                    <div class="content">
                        <i class="el-icon-picture-outline"></i>
                        <span>28%</span>
                    </div>
                    <div class="footer"> <span>产销差率</span> </div>
                </div>
                <div class="card-item last">
                    <div class="content">
                        <i class="el-icon-picture-outline"></i>
                        <span>36%</span>
                    </div>
                    <div class="footer"> <span>管网漏损率</span> </div>
                </div>
                <div class="chart-card">
                    <div class="tops">
                        <span class="rect"></span>
                        <span>漏损率统计(百分比)</span>
                    </div>
                    <div id="charts">
                         <IEcharts
                        :option="leakStatistic.line"
                        :loading="leakStatistic.loading"
                        :resizable="true"
                        /> 
                    </div>
                </div>
            </div>
        </div>
        <div class="tree">
            <el-tree
            :data="data"
            :props="defaultProps"
            accordion
            @node-click="handleNodeClick">
            </el-tree>
        </div>
    </div>
</template>

<script>
import IEcharts from "vue-echarts-v3/src/full.js";
export default {
  components: {
    IEcharts
  },
  data() {
    return {
      leakStatistic: {
        year: "",
        month: "全年",
        loading: false,
        line: {
          tooltip: {
            trigger: "axis"
          },
          grid: {
            top: "35px",
            left: "40px",
            right: "20px",
            bottom: "30px"
          },
          xAxis: {
            type: "category",
            boundaryGap: false,
            data: [
              "1",
              "2",
              "3",
              "4",
              "5",
              "6",
              "7",
              "8",
              "9",
              "10",
              "11",
              "12"
            ]
          },
          yAxis: {
            name: "(%)",
            type: "value",
            splitLine: {
              show: true
            }
          },
          color: "#1cbbdf",
          series: [
            {
              data: [5, 5.7, 6.2, 7.8, 8.5, 9.2, 5.7, 8.2, 6.7, 9.2, 6.7, 8.3],
              type: "line",
              areaStyle: {
                normal: {
                  type: "default",
                  color: "#a4d8cc"
                }
              },
              smooth: false,
              itemStyle: {
                normal: { areaStyle: { type: "default" } }
              }
            }
          ]
        }
      }
    };
  }
};
</script>

<style lang="scss" scoped>
#zoning_leakDetection {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
  background: rgb(221, 211, 211);
  padding: 10px;
  .main {
    width: calc(100% - 220px);
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
    position: relative;
    #gis {
      width: 100%;
      height: 100%;
    }
    .cards {
      position: absolute;
      left: 0px;
      top: 0px;
      width: 300px;
      height: 80%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      & > div {
        height: 32%;
        background: #fff;
      }
      .card-item {
        width: 100%;
        .content {
          width: 100%;
          height: calc(100% - 30px);
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          color: #fff;
          i {
            font-size: 50px;
            line-height: 55px;
          }
          span {
            font-size: 40px;
            line-height: 45px;
            font-weight: 600;
          }
        }
        .footer {
          height: 30px;
          width: 100%;
          text-align: center;
          line-height: 30px;
          font-size: 14px;
          color: #fff;
          background: rgba(0, 0, 0, 0.2);
        }
        &:first-child {
          background: #20bff9;
        }
        &.last {
          background: #f7a444;
        }
      }
      .chart-card {
        width: 100%;
        .tops {
          height: 30px;
          width: 100%;
          padding-left: 10px;
          border-bottom: 1px solid #ccc;
          display: flex;
          justify-content: flex-start;
          align-items: center;
          font-size: 14px;
          span.rect {
            display: inline-block;
            width: 12px;
            height: 12px;
            background: #2db8bd;
            margin-right: 10px;
          }
        }
        #charts{
            width: 100%;
            height: calc(100% - 30px);
        }
      }
    }
  }
  .tree {
    width: 200px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
  }
}
</style>


